<!--
禁止修改!此文件是产品代码的一部分，后续可能变更或者不再开放。
若有问题，请参考前端相关二开文档。
-->
<template>
  <div class="login-qrcode">
    <div id="qrcode-box" class="qrcode"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, PropSync, Watch } from 'vue-property-decorator';

import env from '@/config/env';

@Component({
  name: 'login-qrcode',
  components: {},
})
export default class LoginQrcode extends Vue {
  @PropSync('corpId') syncCorpId!: string;

  @Prop() appKey!: string;

  @Watch('syncCorpId')
  onCorpIdChange() {
    this.init();
  }

  mounted() {
    this.init();
  }

  init() {
    const { scope, client_id, redirectHost, oauthHost, portalHost } = env;
    const failUrl: string = `${portalHost}/login`;

    const redirect_uri = `${oauthHost}/login/dingtalk?redirect_uri=${encodeURIComponent(
      `${oauthHost}/oauth/authorize?client_id=${client_id}&response_type=code&scope=${scope}&redirect_uri=${redirectHost}/oauth`,
    )}&login_fail_redirect_uri=${encodeURIComponent(failUrl)}&corpId=${
      this.syncCorpId
    }`;

    (window as any).DTFrameLogin(
      {
        id: 'qrcode-box',
        width: 300,
        height: 300,
      },
      {
        redirect_uri: encodeURIComponent(redirect_uri),
        client_id: this.appKey || 'dingtivyanofzcfjtjuz',
        scope: 'openid',
        response_type: 'code',
        // state: 'pc',
        prompt: 'consent',
      },
      (loginResult) => {
        const { redirectUrl, authCode, state } = loginResult;
        // // 这里可以直接进行重定向
        window.location.href = redirectUrl;
        // // 也可以在不跳转页面的情况下，使用code进行授权
      },
      (errorMsg) => {
        console.log('errorMsg==>', errorMsg);
        // 这里一般需要展示登录失败的具体原因
      },
    );
  }
}
</script>
<style lang="less" scoped>
.login-qrcode {
  &-header {
    font-size: 30px;
    color: #333;
    line-height: 40px;
    margin: 50px 0 0 0;
  }
  &-type {
    position: absolute;
    top: 32px;
    right: 32px;
    cursor: pointer;
  }
  .qrcode {
    text-align: center;
  }
}
</style>
